<template>
  <van-nav-bar
      :border="border"
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      class="state-bar">
    <template #left>
      <slot name="left">
        <van-icon v-if="showBack" name="arrow-left"/>
      </slot>
    </template>
    <template #title>
      <span @dblclick="onDblclickTitle" :style="titleStyles">{{ title }}</span>
    </template>
    <template #right>
      <slot name="right">
        <span v-if="rightText&&rightText.length">{{ rightText }}</span>
      </slot>
    </template>
  </van-nav-bar>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "StateBar",
  emits: [
    'click-right', 'dblclick-title'
  ],
  props: {
    showBack: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    },
    title: String,
    rightText: String,
    titleStyles: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      leftIcon: require('@/assets/logo.png')
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onClickRight() {
      this.$emit('click-right');
    },
    onDblclickTitle() {
      this.$emit('dblclick-title');
    }
  }
})
</script>

<style lang="less" scoped>
.state-bar {
  height: 46px;
  line-height: 46px;
}
</style>
